<template>
  <div class="building">
    <div class="background">
      <img src="../assets/back.png" alt="" />
    </div>
    <div class="medium">
      <button class="screenshot-btn" @click="showScreenshot(true)">
        截屏
      </button>
      <button @click="copyUrl()">复制成绩链接</button>
      <div class="screenshot-confirm" v-if="isScreenshot">
        <label>截屏可能会弹出图片保存框,可能会影响游戏,是否截屏?</label>
        <br/>
        <button @click="showScreenshot(false)">取消</button>
        <button @click="saveImage('world', 'surface')">确定</button>
      </div>
    </div>
    <div class="front" ref="front" :style="frontStyle">
      <div id="world" ref="world">
        <Login v-model:me="me" v-if="isShowLogin" />
        <Space
          v-model:me="me"
          v-model:space="space"
          v-model:spaceId="spaceId"
          v-model:inLine="inLine"
          v-if="isShowSpace"
        />
        <Websocket
          ref="ws"
          v-show="false"
          :space="space"
          :me="me"
          v-if="isStartWS"
        />
        <Platform
          ref="pe"
          :space="space"
          v-model:inLine="inLine"
          v-model:inGame="inGame"
          :roles="roles"
          v-if="inLine"
        />
        <Colosseum
          ref="co"
          :me="me"
          :space="space"
          :spaceId="spaceId"
          :roles="roles"
          v-model:serial="serial"
          :sign="sign"
          v-model:state="state"
          v-model:watch="watch"
          v-if="inGame"
        />
      </div>
    </div>
    <div class="operation">
      <div class="message">
        <div class="msg-title">消息</div>
        <div class="msg-item" v-for="(msg,msgIndex) in watch.msgList" :key="msgIndex">
          {{ msg }}
        </div>
      </div>
      <div class="info">
        <div class="info-title">我的信息</div>
        <div class="info-label">用户名</div>
        <div class="info-value">{{ me ? me : '无' }}</div>
        <div class="info-color" :class="myColour">
          我的身体颜色
        </div>
      </div>
      <div class="record">
        <div class="record-title">战绩</div>
        <div class="name">用户</div>
        <div class="size">积分</div>
        <div class="kill">击杀</div>
        <div class="name" v-for="(record,recordIndex) in watch.recordList" :key="recordIndex">
          {{ record.username }}
        </div>
        <div class="size" v-for="(record,recordIndex) in watch.recordList" :key="recordIndex">
          {{ record.size }}
        </div>
        <div class="kill" v-for="(record,recordIndex) in watch.recordList" :key="recordIndex">
          {{ record.times_kill }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import Login from "@/components/Login.vue";
import Space from "@/components/Space.vue";
import Websocket from "@/components/Websocket.vue";
import Platform from "@/components/Platform.vue";
import Colosseum from "@/components/Colosseum.vue";
import html2canvas from "html2canvas";

export default {
  name: "Building",
  components: {
    Login,
    Space,
    Websocket,
    Platform,
    Colosseum,
  },
  data() {
    return {
      me: "", // 我的用户名
      space: "", // 区间名
      spaceId: "", // 区间ID
      inLine: false, // 是否在排队
      inGame: false, // 是否游戏中
      roles: [],
      sign: null, // 局标识
      serial: null, // 用户在本局中的序号
      frontStyle: {}, //界面的宽高等设置
      isScreenshot: false, // 是否截屏的询问框
      watch: {
        msgList: [], // 消息列表
        recordList: [], // 成绩列表
      }, // 看板
      state: 2, // 自己的颜色
    };
  },
  async mounted() {
    await this.initFront(); //初始化游戏画面大小
  },
  computed: {
    // 我的颜色
    myColour() {
      let state = this.state;
      return {
        black: state === 1,
        white: state === 2,
        red: state === 3,
        blue: state === 4,
        green: state === 5,
        yellow: state === 6,
        cyan: state === 7,
        magenta: state === 8,
        oxy: state === 9,
      }

    },
    isShowLogin() {
      // 用户名不合法即认为需要登录,此处判断是否为空或者空串
      return !this.me || !this.me.trim();
    },
    isShowSpace() {
      // 用户名合法并且区间名不合法则认为需要创建或者加入区间
      return !this.isShowLogin && (!this.space || !this.space.trim());
    },
    isStartWS() {
      return !this.isShowLogin && !this.isShowSpace;
    },
    isShowColosseum() {
      return !this.isShowLogin && !this.isShowSpace;
    },
  },
  methods: {
    // 复制成绩URL到粘贴板
    copyUrl() {
      if (!this.spaceId) {
        alert("还没有游戏成绩");
        return;
      }
      var url = "http://" + window.location.hostname + ":14000/share/" + this.spaceId;
      this.$copyText(url).then(function (e) {
      alert('复制URL成功')
      console.log(e)
      }, function (e) {
      alert('复制URL失败')
      console.log(e)
      })
    },
    initFront() {
      /* let width = this.$front.$el.clientWidth;
      let height = width / 56 * 30;
      this.frontStyle = {
        "height": height + "px"
      } */
    },
    // 向ws发送消息
    send(msg) {
      this.$refs.ws.send(msg);
    },
    // 接收到ws发来的消息
    receive(msg) {
      let data = JSON.parse(msg);
      if (data.info) {
        // this.$refs.pe.receive(data)
        if (data.username == this.me) {
          this.serial = data.info.serial;
        }
        this.roles = data.info.roles;
      } else if (data.order) {
        let order = data.order;
        switch (order.type) {
          case "cmd":
            eval(order.cmd);
            break;
          case "start":
            this.sign = order.cmd;
            this.$refs.pe.work();
            break;
          default:
            if (this.inGame) {
              this.$refs.co.receive(data);
            }
            break;
        }
      } else {
        console.log("不认识的socket消息");
      }
    },
    //图片格式转换方法
    dataURLToBlob(dataurl) {
      let arr = dataurl.split(",");
      let mime = arr[0].match(/:(.*?);/)[1];
      let bstr = atob(arr[1]);
      let n = bstr.length;
      let u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], { type: mime });
    },
    // 是否显示截屏询问框
    showScreenshot(isScreenshot){
      this.isScreenshot = isScreenshot;
    },
    //保存图片
    saveImage(divText, imgText) {
      this.isScreenshot = false;
      let canvasID = this.$refs[divText];
      let that = this;
      let a = document.createElement("a");
      html2canvas(canvasID).then((canvas) => {
        let dom = document.body.appendChild(canvas);
        dom.style.display = "none";
        a.style.display = "none";
        document.body.removeChild(dom);
        let blob = that.dataURLToBlob(dom.toDataURL("image/png"));
        a.setAttribute("href", URL.createObjectURL(blob));
        //这块是保存图片操作  可以设置保存的图片的信息
        a.setAttribute("download", imgText + ".png");
        document.body.appendChild(a);
        a.click();
        URL.revokeObjectURL(blob);
        document.body.removeChild(a);
      });
    },
  },
};
</script>
<style scoped>
.building {
  width: 100%;
  height: 100%;
  min-width: 1024px;
  min-height: 768px;
  margin: 0px;
}
.background {
  width: 100%;
  height: 100%; /**宽高100%是为了图片铺满屏幕 */
  z-index: -1;
  position: absolute;
}
.background img {
  width: 100%;
  height: 100%; /**宽高100%是为了图片铺满屏幕 */
}
.medium {
  width: 100%;
  height: 100%; /**宽高100%是为了图片铺满屏幕 */
  z-index: 0;
  position: absolute;
}
.front {
  width: 70%;
  height: 60%;
  min-width: 700px;
  min-height: 400px;
  z-index: 1;
  background: rgba(255, 255, 255, 0.5);
  position: absolute;
  left: 0;
  top: 15%;
  bottom: 25%;
  right: 0;
  margin: auto;
  text-align: center;
}
#world {
  width: 100%;
  height: 100%;
}

/*操作*/
.operation {
  text-align: center;
  position: absolute;
  top: 78%;
  left: 15%;
  width: 70%;
  height: 20%;
}

/**询问框 */
.screenshot-confirm label{
  background-color: rgba(255, 255, 255, 0.5);
}

/**消息 */
.message {
  background-color: rgba(102, 8, 116, 0.5);
  text-align: center;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 35%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-flow: row dense;
}

.message div {
  color: white;
  grid-column-start: 1;
  grid-column-end: 1;
}


/**自己的信息 */
.info {
  background-color: rgba(255, 255, 255, 0.5);
  text-align: center;
  position: absolute;
  top: 0%;
  left: 35%;
  width: 30%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-auto-flow: row dense;
}

.info-title {
  grid-column-start: 1;
  grid-column-end: 12;
}

.info-label {
  grid-column-start: 3;
  grid-column-end: 6;
}

.info-value {
  grid-column-start: 7;
  grid-column-end: 10;
}

.info-color {
  grid-column-start: 3;
  grid-column-end: 10;
}

/**成绩 */
.record {
  background-color: rgba(140, 0, 0, 0.5);
  text-align: center;
  position: absolute;
  top: 0%;
  left: 65%;
  width: 35%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-flow: row dense;
}

.record div {
  color:white;
}

.record-title {
  grid-column-start: 1;
  grid-column-end: 12;
}

.record .name {
  grid-column-start: 1;
  grid-column-end: 4;
}

.record .size {
  grid-column-start: 5;
  grid-column-end: 8;
}

.record .kill {
  grid-column-start: 9;
  grid-column-end: 12;
}

.green {
  background-color: green;
}
.red {
  background-color: red;
}
.blue {
  background-color: blue;
}
.black {
  background-color: black;
}
.white {
  background-color: white;
}
.yellow {
  background-color: yellow;
}
.cyan {
  background-color: cyan;
}
.magenta {
  background-color: magenta;
}
.oxy {
  background-color: #e45f2e;
}
</style>
